<template>
  <div class="app-container">

    <el-form ref="form" :model="formInline">
      <el-form-item label="类别名称">
        <el-input v-model="formInline.title" placeholder="title"></el-input>
      </el-form-item>
      <el-form-item>
          <el-radio v-model="formInline.clf" label="1">一级分类</el-radio>
          <el-radio v-model="formInline.clf" label="2" >二级分类</el-radio>
      </el-form-item>
      <el-form-item>
        <!-- 一级分类列表 -->
        <el-select v-model="formInline.parentId" placeholder="父分类选择">
                <el-option
                    v-for="item in oneList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add(formInline.title,formInline.parentId,formInline.clf)">添加</el-button>
        <el-button type="primary" @click="remove(formInline.title,formInline.parentId,formInline.clf)">删除</el-button>
        
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import classify from '@/api/classify'
  export default {
    data() {
      return {
        formInline: {
          parentId: '',
          title: '',
          clf: ''
        },
        oneList: []
      }
    },
    created() {
      //初始化一级分类
      this.getOneList()

    },
    methods: {
      add(title,parentId,clf){
        if(title != '' && clf == 1){
          classify.addOneClassify(title).then(response => {
                    //提示
                    this.$message({
                        type: 'success',
                        message: '添加一级分类信息成功!'
                    });
                    //跳转到第二步
                    this.$router.push({path:'/classify/list'})
                });
          title = '';
        }
        if(title!='' && clf == 2 && parentId != ''){
          classify.addTwoClassify(parentId,title).then(response => {
                    //提示
                    this.$message({
                        type: 'success',
                        message: '添加二级分类信息成功!'
                    });
                    //跳转到第二步
                    this.$router.push({path:'/classify/list'})
                });
          title = '';
          parentId = '';
        }
      },
      remove(title,parentId,clf){
        if(title != '' && clf == 1){
          classify.deletOneClassify(title).then(response => {
                    //提示
                    this.$message({
                        type: 'success',
                        message: '删除一级分类成功!'
                    });
                    //跳转到第二步
                    this.$router.push({path:'/classify/list'})
                });
          title = '';
          clf = '';
          parentId = '';
        }
        if(title!='' && clf == 2){
          classify.deletTwoClassify(title).then(response => {
                    //提示
                    this.$message({
                        type: 'success',
                        message: '删除二级分类成功!'
                    });
                    //跳转到第二步
                    this.$router.push({path:'/classify/list'})
                });
          title = '';
          parentId = '';
          clf = '';
        }
      },
      //查询所有的一级分类
      getOneList() {
            classify.getList()
                .then(response => {
                    this.oneList = response.data.list
                })
      }
    }
  }
</script>

